<template>
  <div style="background-color: white;padding-bottom: 20px">
    <div class="font-mini" style="padding: 32px;height: auto;">
      <div style="margin-bottom: 13px;font-size: 30px;color: #333333;font-weight: bold;text-align: center" >{{data.title}}</div>
      <div class="flex-between-center" style="margin-bottom: 32px;color: #979aa4">
        <div class="flex-start-center">
          <span>{{'更新时间：' + data.publishTime}}</span>
          <span v-if="data.originSource" style="margin-left: 98px">{{'来源：' + data.originSource}}</span>
        </div>
<!--        <div class="flex-start-center">-->
<!--          <img style="width: 15px;height: 11px" src="@/assets/images/common/eye-icon.png" alt="">-->
<!--          <span style="margin-left: 6px">{{'浏览' + data.readAmount}}</span>-->
<!--        </div>-->
      </div>
      <!--          摘要-->
      <div v-if="data.digest" style="padding: 17px 15px;background-color: #F5F7FA">
        <div style="flex-wrap: wrap;font-size: 14px;color: #878a95;line-height: 22px">
          <span style="font-size: 10px;padding: 0 6px;border-radius: 2px 2px 2px 2px;border: 1px solid #04ADDB;color: #04ADDB">摘要</span>
          <span style="margin-left: 4px">{{data.digest}}</span>
        </div>
      </div>
      <!--          文章内容-->
      <div class="news-content" style="margin-top: 30px" v-html="data.content"></div>
    </div>
  </div>
</template>

<script setup>
import {defineProps, reactive, watch} from 'vue';
import {useRouter} from 'vue-router';

const router = useRouter();
const props = defineProps({
  articleInfo: {
    type: Object,
    default: {}
  }
});
watch(() => props.articleInfo, (val) => {

  Object.keys(data).forEach((key) => {
    data[`${key}`] = val[`${key}`]
  })

})
const data = reactive({
  id: '',
  title: '',
  publishTime: '',
  originSource: '',
  readAmount: '',
  digest: '',
  content: ''
});
</script>

<style lang="scss">
.news-content {
  font-size: 16px;
  color: #171920;
  line-height: 32px;
  table {
    border: none;
    border-collapse: collapse;
  }
  table td,
  table th{
    border: 1px solid #ccc;
    padding: 3px 5px;
    min-width: 50px;
    height: 20px;
  }
  table th {
    border-right: 1px solid #ccc;
    border-bottom: 2px solid #ccc;
    text-align: center;
    background-color: #f1f1f1;
  }
  blockquote{
    display: block;
    border-left: 8px solid #d0e5f2;
    padding: 5px 10px;
    margin: 10px 0;
    line-height: 1.4;
    font-size: 100%;
    background-color: #f1f1f1;
  }
  code{
    display: inline-block;
    *display: inline;
    *zoom: 1;
    background-color: #f1f1f1;
    border-radius: 3px;
    padding: 3px 5px;
    margin: 0 3px;
  }
  pre code {
    display: block;
  }
  ul, ol{
    margin: 10px 0 10px 20px;
  }
  pre {
    border: 1px solid #ccc;
    background-color: #f8f8f8;
    padding: 10px;
    margin: 5px 0;
    font-size: 0.8em;
    border-radius: 3px;
  }
  .ql-editor ul li {
    list-style-type: disc;    // 解决序列li前面的.不展示问题
  }
  .ql-editor ol li {
    list-style-type: decimal;   // 解决序列li前面的数字不展示问题
  }
}
</style>
